<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title></title>
    <link rel="stylesheet" type="text/css" href="../../css/mui.min.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/html-base.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/public-train.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/signup.css"/>
    <style type="text/css">
    	.signdatabox .item .item-cell{
		    height: 1.2rem;
		}
    </style>
    <script type="text/javascript" src="../../script/jquery.min.js"></script>
    <script type="text/javascript" src="../../script/newresize.js"></script>
    <script type="text/javascript" src="../../script/mui.min.js"></script>
</head>
<body>
	<header class="header fix-header">
		<a class="backbtn" onclick="backClick();"></a>
		<h1 class="mui-title">订单</h1>
		<a class="icon-close" onclick="backClick();"></a>
	</header>
	<div class="signcontainer">
		<div class="signtopinfo">
			<h1><span id="class_name">货运代理师资培训班</span> <span class="price-txt" id="train_fee">￥12800.00</span></h1>
			<p><span>报到时间：</span><span id="apply_time">2018年12月14日</span>18:00前，若不能达到请提前告知</p>
			<p><span>培训时间：</span><span id="train_time">2018年12月15日-2018年12月17日</span></p>
			<p><span>培训地点：</span><span id="train_address">北京长风物流学院(北京市朝阳区十里堡八里庄东里6号院）</span></p>
		</div>
		<div class="signform">
			<form>
				<div class="signform-cont">
					<div class="signinfo-title">
						<span>请填写您的报名信息</span>
						<span class="signarrow"></span>
					</div>
					<ul class="signdatabox">
						<li class="item">
							<label class="item-label">姓名</label>
							<input type="text" name="" id="apply_name" value="" class="item-input" placeholder="请输入名字"/>
						</li>
						<li class="item">
							<label class="item-label">手机号</label>
							<input type="number" name="" id="apply_contact_phone" value="" class="item-input" placeholder="请输入联系电话"/>
						</li>
						<li class="item">
							<label class="item-label">邮箱</label>
							<input type="email" name="" id="apply_contact_email" value="" class="item-input" placeholder="请输入邮箱"/>
						</li>
						<li class="item">
							<label class="item-label">学校</label>
							<input type="text" name="" id="apply_school" value="" class="item-input" placeholder="请输入所在学校"/>
						</li>
						<li class="item">
							<label class="item-label">院系</label>
							<input type="text" name="" id="spare1" value="" class="item-input" placeholder="请输入所属院系"/>
						</li>
						<li class="item">
							<label class="item-label">专业</label>
							<input type="text" name="" id="apply_major" value="" class="item-input" placeholder="请输入专业"/>
						</li>
						<li class="item">
							<label class="item-label">职务/职称</label>
							<input type="text" name="" id="apply_position" value="" class="item-input" placeholder="请输入职务/职称"/>
						</li>
						<li class="item">
							<label class="item-label">性别</label>
							<div class="item-cell item-cell-fr">
								<label for="sex-women">女</label>
								<input type="radio" name="sex" id="sex-women" value="2" class="item-input"/>
								<label for="sex-man">男</label>
								<input type="radio" name="sex" id="sex-man" value="1" class="item-input"/>
							</div>
						</li>
						<li class="item-txt">住宿需求</li>
						<li class="item2">
							<div class="item-cell">
								<input type="radio" name="room" id="room1" value="1" class="item-input"/>
								<label for="room1">大床房(单间）</label>
							</div>
							<div class="item-cell">
								<input type="radio" name="room" id="room2" value="2" class="item-input"/>
								<label for="room2">标间(合住）</label>
							</div>
							<div class="item-cell">
								<input type="radio" name="room" id="room3" value="3" class="item-input"/>
								<label for="room3">自有安排</label>
							</div>
						</li>
						<li class="item">
							<label class="item-label">入住时间</label>
							<input type="text" name="" id="spare3" value="" class="item-input input-time" placeholder="请选择入住时间" readonly=""/>
							<span class="itme-icon-arrow"></span>
						</li>
						<li class="item" style="border-bottom: 0;">
							<label class="item-label">退房时间</label>
							<input type="text" name="" id="spare4" value="" class="item-input input-time" placeholder="请选择退房时间" readonly=""/>
							<span class="itme-icon-arrow"></span>
						</li>
					</ul>
				</div>
				<div class="signform-cont">
					<div class="signinfo-title">
						<span>支付方式</span><span style="font-size: 0.36rem;color: #999;">（可以选择任意支付方式）</span>
					</div>
					<div class="signpaycont">
						<ul>
							<li class="item">
								<div class="payicon"><p><img src="../../image/payicon_zfb.png"/></p></div>
								<div class="paytxt">
									<label for="pay-zfb">支付宝支付</label>
									<input type="radio" name="pay" id="pay-zfb" value="2"  class="pay-radio"/>
								</div>
							</li>
							<!-- <li class="item">
								<div class="payicon"><p><img src="../../image/payicon_yh.png"/></p></div>
								<div class="paytxt">
									<label for="pay-yh">工商银行储蓄卡</label>
									<input type="radio" name="pay" id="pay-yh" value=""  class="pay-radio"/>
								</div>
							</li> -->
							<li class="item">
								<div class="payicon"><p><img src="../../image/payicon_qb.png"/></p></div>
								<div class="paytxt" style="border-bottom: 0;">
									<label for="pay-qb">线下支付</label>
									<input type="radio" name="pay" id="pay-qb" value="1"  class="pay-radio"/>
								</div>
							</li>
						</ul>
					</div>
				</div>
				<div class="signform-cont">
					<div class="signinfo-title2">
						<span>报名后可在（学习）区查看</span>
					</div>
					<div class="signpaycont">
						<div class="sign-beizhutit">备注</div>
						<div class="sign-beizhutxt">
							<textarea name="" rows="" cols="" placeholder="如有其它需要，请留言给我们..."></textarea>
						</div>
					</div>
				</div>
			</form>
		</div>
	</div>
	<div onclick="onPayClick()" class="confirmpay">确认支付</div>
</body>
<script type="text/javascript" src="../../script/laydate/laydate.js"></script>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/jquery.min.js"></script>
<script type="text/javascript" src="../../script/mui.min.js"></script>
<script type="text/javascript" src="../../script/MD5.js"></script>
<script type="text/javascript" src="../../script/requestTool.js"></script>
<script type="text/javascript" src="../../script/timeStampTool.js"></script>
<script type="text/javascript">
	var currentParams = null;
	var payId;
	$(function(){
		$(".signinfo-title").on("click",function(){
			$(this).find(".signarrow").toggleClass("rightarrow");
			$(this).siblings(".signdatabox").toggle();
		});
		//时间插件
		lay('.input-time').each(function(){
			laydate.render({
				elem: this,
				format: 'yyyy-MM-dd',
				trigger: 'click' ,
				theme: 'xxx',
				ready: function(date){
					//插件初始化打开时调整显示的位置
				    $(".laydate-theme-xxx").css({"left":"50%","margin-left":"-137px"});
				},
				done: function(value, date, endDate){
				    console.log(value); //得到日期生成的值，如：2017-08-18
				    console.log(date); //得到日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
				    console.log(endDate); //得结束的日期时间对象，开启范围选择（range: true）才会返回。对象成员同上。
				}
			});
		});
	});
	apiready = function(){
	    setupPageData();
	}
	function setupPageData(){
		var data = api.pageParam;
		$('#train_fee').text('￥'+data.train_fee);//价格
		$('#class_name').text(data.class_name);
		$('#apply_time').text(timeWithStamp6(data.apply_start_time));//报名时间
		$('#train_time').text(timeWithStamp6(data.train_start_time)+'-'+timeWithStamp6(data.train_end_time));//培训时间
		$('#train_address').text(data.train_address);//培训地址
	}

	function onPayClick(){
		var apply_name = $('#apply_name').val();
		if (isSpace(apply_name)) {
			api.toast({
			    msg: '请输入姓名'
			});
			return;
		}
		var apply_contact_phone = $('#apply_contact_phone').val();
		if (isSpace(apply_contact_phone)) {
			api.toast({
			    msg: '请输入手机号'
			});
			return;
		}
		var apply_contact_email = $('#apply_contact_email').val();
		if (isSpace(apply_contact_email)) {
			api.toast({
			    msg: '请输入邮箱'
			});
			return;
		}
		var apply_school = $('#apply_school').val();
		if (isSpace(apply_school)) {
			api.toast({
			    msg: '请输入学校名称'
			});
			return;
		}
		var spare1 = $('#spare1').val();
		if (isSpace(spare1)) {
			api.toast({
			    msg: '请输入院系名称'
			});
			return;
		}
		var apply_major = $('#apply_major').val();
		if (isSpace(apply_major)) {
			api.toast({
			    msg: '请输入专业名称'
			});
			return;
		}
		var apply_position = $('#apply_position').val();
		if (isSpace(apply_position)) {
			api.toast({
			    msg: '请输入职务名称'
			});
			return;
		}
		var spare3 = $('#spare3').val();
		if (isSpace(spare3)) {
			api.toast({
			    msg: '请输选择入住时间'
			});
			return;
		}
		//时间字符转时间戳
		spare3 = timeStamp10WithString(spare3);
		var spare4 = $('#spare4').val();
		if (isSpace(spare4)) {
			api.toast({
			    msg: '请选择退房时间'
			});
			return;
		}
		//时间字符转时间戳
		spare4 = timeStamp10WithString(spare4);
		var apply_sex  = $("input[name='sex']:checked").val();
		if (apply_sex == undefined) {
			api.toast({
			    msg: '请选择性别'
			});
			return;
		}
		var spare2 = $("input[name='room']:checked").val();
		if (spare2 == undefined) {
			api.toast({
			    msg: '请选择住宿要求'
			});
			return;
		}
		var radioValue = $("input[name='pay']:checked").val();
		if (radioValue == undefined) {
			api.toast({
			    msg: '请选择支付方式'
			});
			return;
		}
		currentParams = {
			apply_name : apply_name,//姓名
            apply_user_id:$api.getStorage("cfnetppuid"),
			apply_contact_phone : apply_contact_phone,//手机号
			apply_contact_email : apply_contact_email,//邮箱
			apply_school : apply_school,//学校
			apply_major : apply_major,//专业
			apply_position : apply_position,//职务/职称
			apply_sex : apply_sex,//性别 1男 2女
			apply_type_id : 10,//报名类型ID 10:长风班报名  11:实践教学报名
			spare1 : spare1,//院系
			spare2 : spare2,//住宿要求 1大床房（单间） 2标间（合住） 3自有安排
			spare3 : spare3,//入住时间(时间戳)
			spare4 : spare4,//退房时间
			link_id : api.pageParam.id,//培训班id
			pay_type:parseInt(radioValue)
		};
		api.sendEvent({
			name: 'win_signup_train',
			extra: currentParams
		});
	}
	function backClick(){
		api.closeWin();
	}
	function isSpace(str){
		if (str == null || str == '' || str.replace(/(^\s*)|(\s*$)/g, "") == '') {
            return true;
        }
        return false;
	}
</script>
</html>